<template>
  <div class="d-row">
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">名称</label>
      </div>
      <div class="d-form-el">
        <input v-model="state.name" class="d-form-input" type="text" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">类型</label>
      </div>
      <div class="d-form-el">
        <select v-model="state.type" class="d-form-select">
          <option v-for="item in exeunitTypeList" :key="item.id" :value="item.id">{{ item.text }}</option>
        </select>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">执行方式</label>
      </div>
      <div class="d-form-el">
        <select v-model="state.runType" class="d-form-select">
          <option v-for="item in runTypeList" :key="item.id" :value="item.id">{{ item.text }}</option>
        </select>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">渲染组件</label>
      </div>
      <div class="d-form-el">
        <select v-model="state.cid" class="d-form-select">
          <option v-for="item in visualList" :key="item.id" :value="item.id">{{ item.text }}</option>
        </select>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">过程处理</label>
      </div>
      <div class="d-form-el">
        <Coder v-model="state.executor" :height="'480px'" />
        <div v-if="isShowOrigin" class="d-section">
          <button @click="handleUseOrigin('executor')" class="d-btn d-btn-default" type="button">使用源单元配置</button>
        </div>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">使用源配置</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isExecutorOrigin" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">输入处理</label>
      </div>
      <div class="d-form-el">
        <Coder v-model="state.input" :height="'480px'" />
        <div v-if="isShowOrigin" class="d-section">
          <button @click="handleUseOrigin('input')" class="d-btn d-btn-default" type="button">使用源单元配置</button>
        </div>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">使用源配置</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isInputOrigin" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">输出处理</label>
      </div>
      <div class="d-form-el">
        <Coder v-model="state.output" :height="'480px'" />
        <div v-if="isShowOrigin" class="d-section">
          <button @click="handleUseOrigin('output')" class="d-btn d-btn-default" type="button">使用源单元配置</button>
        </div>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">使用源配置</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isOutputOrigin" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">状态</label>
      </div>
      <div class="d-form-el">
        <select v-model="state.status" class="d-form-select">
          <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
        </select>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">描述</label>
      </div>
      <div class="d-form-el">
        <textarea v-model="state.description" class="d-form-textarea"></textarea>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">排序</label>
      </div>
      <div class="d-form-el">
        <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
      </div>
    </div>
    <div v-if="isShowOrigin" class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">&emsp;</label>
      </div>
      <div class="d-form-el">
        <button @click="handleUseOrigin" class="d-btn d-btn-default" type="button">全部使用源单元配置</button>
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">是否隐藏</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isHidden" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex">
      <div class="d-form-label d-text-right">
        <label class="label-text">是否折叠</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isCollapse" />
      </div>
    </div>
  </div>
</template>

<script>
import { Dialoger, Switcher } from '@daelui/vdog/dist/components'
import { Coder } from '@daelui/vdog/dist/coder'
import { objecter, coder } from '@daelui/dogjs/dist/components'
import unitSer from '../../../service/action/exeunit.action.js'
import { state } from '../../../service/stock/index.js'

export default {
  components: {
    Coder, Switcher
  },

  props: {
    data: {
      default () {
        return {
          id: '',
          name: '',
          productId: '',
          type: '',
          runType: '',
          cid: '',
          executor: `export default function (payload) {
    return payload
  }`,
          input: `export default function (payload) {
    return payload
  }`,
          output: `export default function (payload) {
    return payload
  }`,
          description: '',
          status: 1,
          order: 1,
          updateTime: '',
          updateUser: '',
          createTime: '',
          createUser: ''
        }
      }
    },
    // 是否显示源单元进行替换
    isShowOrigin: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        name: '',
        productId: '',
        type: '',
        runType: '',
        cid: '',
        executor: `export default function (payload) {
  return payload
}`,
        input: `export default function (payload) {
  return payload
}`,
        output: `export default function (payload) {
  return payload
}`,
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 源单元
      originUnit: {},
      // 状态列表
      statusList: state.statusList,
      // 执行单元类型
      exeunitTypeList: state.exeunitTypeList,
      // 执行类型
      runTypeList: state.runTypeList,
      // 视图列表
      visualList: state.visualList
    }
  },

  watch: {
    data: {
      deep: true,
      handler (value) {
        this.loadItem(value)
      }
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (unit, customUnit = {}) {
      let defer = Promise.resolve({})
      if (unit && unit.uid) {
        customUnit = unit
        defer = unitSer.queryItem({ id: unit.uid }).then(result => {
          return result.data || {}
        })
      } else if (typeof unit === 'string') {
        defer = unitSer.queryItem({ id: unit }).then(result => {
          return result.data || {}
        })
      }
      defer.then(data => {
        this.originUnit = objecter.clone(data)
        let process = `export default function (payload) {
  return payload
}`
        data.executor = data.executor || process
        data.input = data.input || process
        data.output = data.output || process
        // 自定义覆盖
        for (let key in data) {
          data[key] = customUnit[key] || data[key] || ''
        }
        for (let key in customUnit) {
          data[key] = customUnit[key] || data[key] || ''
        }
        this.state = data
      })
    },

    /**
     * @function 验证
    */
    valid () {
      try {
        coder.compile(this.state.executor, window.Babel, window.preset)
      } catch (e) {
        Dialoger.danger('过程处理解析失败')
        console.log(e)
        return false
      }
      try {
        coder.compile(this.state.input, window.Babel, window.preset)
      } catch (e) {
        Dialoger.danger('输入处理解析失败')
        console.log(e)
        return false
      }
      try {
        coder.compile(this.state.output, window.Babel, window.preset)
      } catch (e) {
        Dialoger.danger('输出处理解析失败')
        console.log(e)
        return false
      }
      return true
    },
    /**
     * @function 使用源
    */
    handleUseOrigin (key) {
      if (key) {
        this.state[key] = this.originUnit[key] || ''
      } else {
        Object.keys(this.originUnit).forEach(key => {
          if (key === 'id') {
            return true
          }
          this.state[key] = this.originUnit[key] || ''
        })
      }
    }
  },

  mounted () {
    this.$emit('onMounted')
  }
}
</script>

<style scoped>
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 120px;
}
</style>
